import React, { useEffect, useState, useRef } from "react";
import * as echarts from 'echarts';

interface BaseChartProps {
    option: {};
    width: number;
    height: number;
}

export default function BaseChart(props: BaseChartProps) {

    const baseRef = useRef();

    useEffect(() => {
        echarts.dispose(baseRef.current);
        const myChart = echarts.init(baseRef.current);
        myChart.setOption(props.option);
    }, [props.option, props.width, props.height]);
    return (
        <div ref={baseRef} style={{ width:props.width, height:props.height }}/>
    );
}